<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
        小米商城 - Xiaomi 13、Redmi K60、MIX FOLD 2，小米电视官方网站
    </title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/fonts.css">
    <link rel="shortcut icon" href="./img/favicon.ico" type="image/x-icon">
    <script src="./js/jquery-3.7.1.min.js"></script>
</head>

<body>
    <!-- 顶部栏 -->
    <div class="topBar">
        <div class="container">
            <!-- 顶部栏由三块组成，列表，购物车以及登录 -->
            <!-- 顶部栏的列表区 -->
            <div class="topBar-list">
                <!-- 每个列表可以分为两部分，一个a标签代表链接以及span标签“|”分隔开 -->
                <a href="./index.html">小米官网</a>
                <span>|</span>
                <a href="#">小米商城</a>
                <span>|</span>
                <a href="#">小米澎湃OS</a>
                <span>|</span>
                <a href="#">loT</a>
                <span>|</span>
                <a href="#">云服务</a>
                <span>|</span>
                <a href="#">天星数科</a>
                <span>|</span>
                <a href="#">有品</a>
                <span>|</span>
                <a href="#">小爱开放平台</a>
                <span>|</span>
                <a href="#">资质证照</a>
                <span>|</span>
                <a href="#">协议规则</a>
                <span>|</span>
                <a href="./download.html" class="a_download">下载app
                    <div class="download">
                        <img src="./img/download.png" alt="">
                        <p>小米商城app</p>
                    </div>
                    <div class="stri"></div>
                </a>
                <span>|</span>
                <a href="#">Select Location</a>
                <span>|</span>
            </div>
            <!-- 顶部栏的购物车区 -->
            <div class="shop">
                <a href="#">
                    <i class="iconfont">&#xe690;</i>
                    <i>购物车（0）</i>
                </a>
                <div class="cart-list">
                    购物车中还没有商品,赶紧选购吧!
                </div>
            </div>
            <!-- 顶部栏的登录区 -->
            <div class="login">
                <a href="#">登录</a>
                <span>|</span>
                <a href="#">注册</a>
                <span>|</span>
                <a href="./notification.html">消息通知</a>
                <span>|</span>
            </div>
        </div>
    </div>
    <!-- 右侧固定访问 -->
    <div class="tool-bar">
        <ul>
            <li class="open-box">
                <a href="#">
                    <img src="./img/side1gray.png" class="static">
                    <img src="./img/side1.png" class="hover">
                    <span>手机APP</span>
                    <div class="app-download">
                        <img src="./img/download.png">
                        <span>扫码领取新人百元红包</span>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./img/side2gray.png" class="static">
                    <img src="./img/side2.png" class="hover">
                    <span>个人中心</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./img/side3gray.png" class="static">
                    <img src="./img/side3.png" class="hover">
                    <span>售后服务</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./img/side4gray.png" class="static">
                    <img src="./img/side4.png" class="hover">
                    <span>人工客服</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./img/side5gray.png" class="static">
                    <img src="./img/side5.png" class="hover">
                    <span>购物车</span>
                </a>
            </li>
        </ul>
    </div>
    <!-- 导航栏 -->
    <div class="header">
        <div class="container">
            <!-- 导航栏由三块组成，图标，列表，以及搜索框 -->
            <!-- 导航栏的图标区 -->
            <div class="site-logo">
                <a href="#">
                    <img src="img/logo.png" alt="">
                </a>
            </div>
            <!-- 导航栏的列表区 -->
            <div class="site-list">
                <ul class="clearfix">
                    <li class="site-category"><a href="#"><img src="" alt=""></a>
                        <!-- 侧边栏 -->
                        <div class="category-list">
                            <ul>
                                <li><a href="#">手机
                                        <span class="iconfont">&#xe605;</span>
                                    </a>
                                </li>
                                <li><a href="#">电视
                                        <span class="iconfont">&#xe605;</span>
                                    </a>
                                </li>
                                <li><a href="#">家电
                                        <span class="iconfont">&#xe605;</span>
                                    </a>
                                </li>
                                <li><a href="#">笔记本 平板
                                        <span class="iconfont">&#xe605;</span>
                                    </a>
                                </li>
                                <li><a href="#">出现 穿戴
                                        <span class="iconfont">&#xe605;</span>
                                    </a>
                                </li>
                                <li><a href="#">耳机 音箱
                                        <span class="iconfont">&#xe605;</span>
                                    </a>
                                </li>
                                <li><a href="#">健康 儿童
                                        <span class="iconfont">&#xe605;</span>
                                    </a>
                                </li>
                                <li><a href="#">生活 箱包
                                        <span class="iconfont">&#xe605;</span>
                                    </a>
                                </li>
                                <li><a href="#">智能路由器
                                        <span class="iconfont">&#xe605;</span>
                                    </a>
                                </li>
                                <li><a href="#">电源 配件
                                        <span class="iconfont">&#xe605;</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li style="margin-left: 150px;"><a href="#">Xiaomi手机</a></li>
                    <li><a href="#">Redmi手机</a></li>
                    <li><a href="#">电视</a></li>
                    <li><a href="#">笔记本</a></li>
                    <li><a href="#">平板</a></li>
                    <li><a href="#">家电</a></li>
                    <li><a href="#">路由器</a></li>
                    <li><a href="service.html">服务中心</a></li>
                    <li><a href="#">社区</a></li>
                </ul>
            </div>
            <!-- 导航栏的搜索框 -->
            <div class="site-search">
                <form action="">
                    <input type="text" name="search" class="search-text" placeholder="耳机">
                    <input type="submit" class="search-btn iconfont" value="&#xe8d6;" style="font-size: 24px;">
                </form>
            </div>
        </div>
    </div>
    <!-- 主页内容区 -->
    <div class="site-content">
        <div class="container">
            <!-- 轮播图 -->
            <div class="wrapper">
                <div class="contain">
                    <img src="./img/index_banner1.png" alt="">
                    <img src="./img/index_banner2.png" alt="">
                    <img src="./img/index_banner3.png" alt="">
                    <img src="./img/index_banner4.png" alt="">
                    <img src="./img/index_banner5.png" alt="">
                </div>
                <div class="btn">
                    <span class="active"></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
                <a class="prev" href="javascript:void(0);">&lt;</a>
                <a class="next" href="javascript:void(0);">&gt;</a>
            </div>
            <!-- 向导 -->
            <div class="content-sub">
                <!-- 向导左 -->
                <div class="content-channel">
                    <ul class="channel-list clearfix">
                        <li><a href="#">
                                <i class="iconfont">&#xe651;</i>
                                选购手机
                            </a></li>
                        <li><a href="#">
                                <i class="iconfont">&#xe61e;</i>
                                企业团购
                            </a></li>
                        <li><a href="#">
                                <i class="iconfont">&#xe601;</i>
                                F码通道
                            </a></li>
                        <li><a href="#">
                                <i class="iconfont">&#xe600;</i>
                                米粉卡
                            </a></li>
                        <li><a href="#">
                                <i class="iconfont">&#xe6d8;</i>
                                以旧换新
                            </a></li>
                        <li><a href="#">
                                <i class="iconfont">&#xe95b;</i> </i>
                                话费充值
                            </a></li>
                    </ul>
                </div>
                <!-- 向导右 -->
                <div class="content-list">
                    <ul class="clearfix">
                        <li><a href=""><img src="img/image1.jpg"></a></li>
                        <li><a href=""><img src="img/image2.jpg"></a></li>
                        <li><a href=""><img src="img/image3.jpg"></a></li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- banner图 -->
        <div class="content-banner">
            <div class="container">
                <a href="#">
                    <img src="./img/banner.jpg">
                </a>
            </div>
        </div>
    </div>
    <!-- 内容详情 -->
    <div class="content-desc">
        <div class="container">
            <!-- 上层标题 -->
            <div class="box-hd">
                <h2>手机</h2>
                <div class="more">
                    <a href="#">查看全部
                        <i class="iconfont">&#xe605;</i>
                    </a>
                </div>
            </div>
            <!-- 下层内容 -->
            <div class="box-bd">
                <div class="row clearfix">
                    <!-- 内容左边大图 -->
                    <div class="row-l">
                        <a href="#">
                            <img src="./img/iphone.jpg">
                        </a>
                    </div>
                    <!-- 内容右边小图分为两大部分，图片，商品描述 -->
                    <div class="row-r">
                        <ul>
                            <li>
                                <!-- 图片区 -->
                                <div class="figure">
                                    <a href="#">
                                        <img src="./img/figure1.jpg">
                                    </a>
                                </div>
                                <!-- 商品描述 -->
                                <h3 class="title">
                                    <a href="#">
                                        Xiaomi 14 Pro
                                    </a>
                                </h3>
                                <p class="desc">
                                    徕卡Summilux可变光圈镜头｜小米澎湃OS
                                </p>
                                <p class="price">
                                    <span class="num">4999</span>元起
                                </p>
                            </li>
                            <li>
                                <!-- 图片区 -->
                                <div class="figure">
                                    <a href="#">
                                        <img src="./img/figure2.jpg">
                                    </a>
                                </div>
                                <!-- 商品描述 -->
                                <h3 class="title">
                                    <a href="#">
                                        Xiaomi 14
                                    </a>
                                </h3>
                                <p class="desc">
                                    徕卡光学Summilux镜头｜小米澎湃OS｜第三代骁龙®8移动平台
                                </p>
                                <p class="price">
                                    <span class="num">3999</span>元起
                                </p>
                            </li>
                            <li>
                                <!-- 图片区 -->
                                <div class="figure">
                                    <a href="#">
                                        <img src="./img/figure3.jpg">
                                    </a>
                                </div>
                                <!-- 商品描述 -->
                                <h3 class="title">
                                    <a href="#">
                                        Redmi Note 13 Pro
                                    </a>
                                </h3>
                                <p class="desc">
                                    小金刚品质
                                </p>
                                <p class="price">
                                    <span class="num">1399</span>元起
                                </p>
                            </li>
                            <li>
                                <!-- 图片区 -->
                                <div class="figure">
                                    <a href="#">
                                        <img src="./img/figure4.jpg">
                                    </a>
                                </div>
                                <!-- 商品描述 -->
                                <h3 class="title">
                                    <a href="#">
                                        Redmi Note 13 Pro+
                                    </a>
                                </h3>
                                <p class="desc">
                                    天玑 7200-Ultra 处理器
                                </p>
                                <p class="price">
                                    <span class="num">1899</span>元起
                                </p>
                            </li>
                            <li>
                                <!-- 图片区 -->
                                <div class="figure">
                                    <a href="#">
                                        <img src="./img/figure5.jpg">
                                    </a>
                                </div>
                                <!-- 商品描述 -->
                                <h3 class="title">
                                    <a href="#">
                                        Redmi Note 13 5G
                                    </a>
                                </h3>
                                <p class="desc">
                                    1 亿像素 更快更清晰
                                </p>
                                <p class="price">
                                    <span class="num">1099</span>元起
                                </p>
                            </li>
                            <li>
                                <!-- 图片区 -->
                                <div class="figure">
                                    <a href="#">
                                        <img src="./img/figure6.jpg">
                                    </a>
                                </div>
                                <!-- 商品描述 -->
                                <h3 class="title">
                                    <a href="#">
                                        Xiaomi MIX Fold 3
                                    </a>
                                </h3>
                                <p class="desc">
                                    轻薄折叠屏丨徕卡光学丨全焦段四摄
                                </p>
                                <p class="price">
                                    <span class="num">8999</span>元起
                                </p>
                            </li>
                            <li>
                                <!-- 图片区 -->
                                <div class="figure">
                                    <a href="#">
                                        <img src="./img/figure7.jpg">
                                    </a>
                                </div>
                                <!-- 商品描述 -->
                                <h3 class="title">
                                    <a href="#">
                                        Redmi K60 至尊版
                                    </a>
                                </h3>
                                <p class="desc">
                                    旗舰体验全面超预期
                                </p>
                                <p class="price">
                                    <span class="num">2599</span>元起
                                </p>
                            </li>
                            <li>
                                <!-- 图片区 -->
                                <div class="figure">
                                    <a href="#">
                                        <img src="./img/figure8.jpg">
                                    </a>
                                </div>
                                <!-- 商品描述 -->
                                <h3 class="title">
                                    <a href="#">
                                        Redmi 12 5G
                                    </a>
                                </h3>
                                <p class="desc">
                                    5G 骁龙芯，大屏大电量
                                </p>
                                <p class="price">
                                    <span class="num">949</span>元起
                                </p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>




        </div>
    </div>
    <!-- 脚部 -->
    <div class="footer">
        <div class="container">
            <!-- 脚部一共分为两部分，上部分的服务以及其他小字 -->
            <div class="footer-service">
                <ul class="clearfix">
                    <li class="first">
                        <a href="#">
                            <i class="iconfont">&#xe629;</i>
                            预约维修服务
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="iconfont">&#xe600;</i>
                            7天无理由退货
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="iconfont">&#xe638;</i>
                            15天免费换货
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="iconfont">&#xe790;</i>
                            满99元包邮
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="iconfont">&#xe768;</i>
                            520余家售后网点
                        </a>
                    </li>
                </ul>
            </div>
            <div class="footer-links clearfix">
                <dl class="col-links">
                    <dt>帮助中心</dt>
                    <dd>账户管理</dd>
                    <dd>购物指南</dd>
                    <dd>订单操作</dd>
                </dl>
                <dl class="col-links">
                    <dt>服务支持</dt>
                    <dd>售后政策</dd>
                    <dd>自助服务</dd>
                    <dd>相关下载</dd>
                </dl>
                <dl class="col-links">
                    <dt>线下门店</dt>
                    <dd>小米之家</dd>
                    <dd>服务网点</dd>
                    <dd>授权体验店</dd>
                </dl>
                <dl class="col-links">
                    <dt>关于小米</dt>
                    <dd>了解小米</dd>
                    <dd>加入小米</dd>
                    <dd>投资者关系</dd>
                </dl>
                <dl class="col-links">
                    <dt>关注我们</dt>
                    <dd>新浪微博</dd>
                    <dd>官方微信</dd>
                    <dd>联系我们</dd>
                </dl>
                <dl class="col-links">
                    <dt>特色服务</dt>
                    <dd>F码通道</dd>
                    <dd>礼物码</dd>
                    <dd>防伪查询</dd>
                </dl>
                <div class="col-contact">
                    <p class="phone">400-100-5678</p>
                    <p>8:00-18:00（仅收市话费）</p>
                    <a href="#">
                        <i class="iconfont">&#xe641;</i>
                        人工客服
                    </a>
                </div>
            </div>

        </div>
    </div>
</body>
<!-- jqery实现主页的轮播 -->
<script>
    var index = 0;
    // 点击上一张
    $(".prev").click(function () {
        console.log(66666);
        prev_pic();
    })
    // 点击下一张
    $(".next").click(function () {
        console.log(999999);
        next_pic();
    })
    // 悬浮停止
    $(".wrapper").mouseover(function () {
        console.log("鼠标悬浮");
        clearInterval(id);
    });
    $(".wrapper").mouseout(function () {
        console.log("鼠标移出");
        autoplay();
    })


    // 下一张
    function next_pic() {
        index++;
        if (index > 4) {
            index = 0;
        }
        addStyle();
    }

    // 上一张
    function prev_pic() {
        index--;
        if (index < 0) {
            index = 4;
        }
        addStyle();
    }

    // 点击小圆点切换图片
    $(".site-content .container .wrapper .btn span").click(function () {
        index = $(this).index();
        addStyle();
    });

    // 控制图片显示隐藏,小圆点背景色
    function addStyle() {
        $(".site-content .container .wrapper img").eq(index).fadeIn();
        $(".site-content .container .wrapper img").eq(index).siblings().fadeOut();
        $(".site-content .container .wrapper .btn span").eq(index).addClass("active");
        $(".site-content .container .wrapper .btn span").eq(index).siblings().removeClass("active");
    }

    // 自动轮播
    var id;
    autoplay();
    function autoplay() {
        id = setInterval(function () {
            next_pic();
        }, 3000)
    }
</script>

</html>